<template>
    <div class="panel01">
        <CrTitle>实时负载情况</CrTitle>
        <echarts01 class="echarsss1" :content="'{value}%\n负载情况'" :value="((count-free)/count * 100).toFixed(2)"></echarts01>
        <ul class="infow-box">
            <li class="row" v-for="row in datalists">
                <div class="cont-box" v-for="item in row">
                    <div class="num">
                        <span class="icon" :style="{backgroundColor:item.bgc}"></span>
                        <span :style="{color:item.bgc}">{{item.num}}</span>
                    </div>
                    <div class="title">{{item.title}}</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="panel02">
        <CrTitle>实时收益情况</CrTitle>
        <echarts01 class="echarsss1" :content="'{value}%\n收益率'" :value="((count-free)/count * 100*0.352345).toFixed(2)"></echarts01>
        <ul class="infow-box">
            <li class="row" v-for="row in datalists2">
                <div class="cont-box" v-for="item in row">
                    <div class="num">
                        <span class="icon" :style="{backgroundColor:item.bgc}"></span>
                        <span :style="{color:item.bgc}">{{item.num}}</span>
                    </div>
                    <div class="title">{{item.title}}</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="panel03">
        <CrTitle>今日各时段负载情况</CrTitle>
        <echarts03 class="echarsss1" :value="((count-free)/count).toFixed(2)"></echarts03>
    </div>
    <div class="panel04">
        <CrTitle>收益来源</CrTitle>
        <echarts02 class="echarsss1" :value="((count-free)/count).toFixed(2)"></echarts02>
    </div>
</template>

<script setup lang="ts">
    import echarts01 from '../../components/echarts/echarts01.vue';
    import echarts02 from '../../components/echarts/echarts02.vue';
    import echarts03 from '../../components/echarts/echarts03.vue';
    import CrTitle from '../../components/CrTitle.vue';
    import ParkInfoWindow from '../../components/InfoWindow/ParkInfoWindow.vue';
    import {reactive, onMounted, onUnmounted} from 'vue'
    import {GlobalVariables} from "../../GlobalVariables";
    import {AMapUtil} from "../../utils/AMapUtil";

   let cluster:any = null;
    const count:any = parseInt(Math.random() * 500 + "") + 50 * 872;
    const free:any = parseInt(count * Math.random() * 0.5+count*0.1 + "");
    const free_1:any = parseInt(free - count * Math.random() * 0.5-count*0.1+"");
    const evaluate:any = (Math.random()  + 4 ).toFixed(2);
    const datalists = reactive([
        [
            {
                title:"总车位",
                bgc:"#ff4ff9",
                num:count,
            },
            {
                title:"空闲车位",
                bgc:"#80c5ff",
                num:free,
            }
        ],
        [
            {
                title:"同比上日",
                bgc:"#ff3e41",
                num:free_1,
            },
            {
                title:"评分",
                bgc:"#ff3e41",
                num:evaluate,
            }
        ]
    ])

    const hours:any = new Date().getHours();
    const count2:any= ((count -free ) * 1.7 * hours).toFixed(2);
    const count3:any= (free_1 * 1.7 * hours).toFixed(2);
    const absCount3 = Math.abs(count3);
    const count4:any= (count3 * Math.random() * 0.3 + absCount3 * Math.random() * 0.3 +absCount3 * Math.random() * 0.4).toFixed(2);
    const absCount4 = Math.abs(count4);
    const count5= (count4 * Math.random() * 0.3 + absCount4 * Math.random() * 0.3 +absCount4 * Math.random() * 0.4).toFixed(2);
    const datalists2 = reactive([
        [
            {
                title:"今日总收益",
                bgc:"#ff4ff9",
                num:count2,
            },
            {
                title:"同比上日",
                bgc:"#ff3e41",
                num:count3,
            },
        ],
        [
            {
                title:"同比上月",
                bgc:"#ff3e41",
                num:count4,
            },
            {
                title:"同比上年",
                bgc:"#ff3e41",
                num:count5,
            }
        ]
    ])



    AMapUtil.onMapLoaded(()=>{
      AMapUtil.createParkingSpotCluster();
        GlobalVariables.map.setZoomAndCenter(12, [119.301546,26.061267]);
    })
    onUnmounted(() => {
        AMapUtil.clearPlaceSearch();
        AMapUtil.clearParkingSpotCluster();
        AMapUtil.clearDriving();
        GlobalVariables.map.clearInfoWindow();
    })
</script>

<style scoped lang="less">
    .panel01{
        position: fixed;
        top: 1rem;
        left: 1.05rem;
        width: 4rem;
        background-color: #304a4f;
        .echarsss1{
            width: 80%;
            margin: 0 auto;
            height: 2.5rem;
        }
    }
    .panel02{
        position: fixed;
        top: 1rem;
        right: 0.2rem;
        width: 4rem;
        background-color: #304a4f;
        .echarsss1{
            width: 80%;
            margin: 0 auto;
            height: 2.5rem;
        }
    }
    .panel03{
        position: fixed;
        top: 5.7rem;
        left: 1.05rem;
        width: 4rem;
        background-color: #304a4f;
        .echarsss1{
            width: 80%;
            margin: 0 auto;
            height: 2.5rem;
        }
    }
    .panel04{
        position: fixed;
        top: 5.7rem;
        right: 0.2rem;
        width: 4rem;
        background-color: #304a4f;
        .echarsss1{
            width: 80%;
            margin: 0 auto;
            height: 2.5rem;
        }
    }
</style>